// Name:                       Nav
//
// Description:                Define style for Nav
// Component:                  `.am-nav`
//
// Sub-objects:                `.am-nav-header`
//                             `.am-nav-divider`
//
// Modifiers:                  `.am-nav-pills`
//                             `.am-nav-tabs`
//                             `.am-nav-justify`
//
// States:                     `.am-active`
//                             `.am-disabled`
//
// Uses:                        Icon
//
// Used by:                     Dropdown
//
// =============================================================================
// Tabs justify mixin
// =============================================================================
.nav-tabs-justify() {
    border-bottom: 0;
    /*  > li > a {
      margin-right: 0;
      border-radius: @global-radius;
    }

    > .am-active > a {
      &,
      &:hover,
      &:focus {
        border: 1px solid @nav-tabs-justify-link-border-color;
      }
    }*/
    // @media @medium-up {
    >li>a {
        margin-right: 0;
        border-bottom: 1px solid @nav-tabs-justify-link-border-color;
        border-radius: @global-radius @global-radius 0 0;
    }
    >.am-active>a {
        &, &:hover, &:focus {
            border-bottom-color: @nav-tabs-justify-active-link-border-color;
        }
    }
    // }
}


/* ==========================================================================
   Component: Nav
 ============================================================================ */

.@{ns}nav {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    .clearfix();
    >li {
        position: relative;
        display: block;
        +li {
            margin-top: 5px; // Stacked
        }
        +.@{ns}nav-header {
            margin-top: @nav-header-margin-top;
        }
        >a {
            position: relative;
            display: block;
            padding: @nav-link-padding;
            border-radius: @nav-link-border-radius;
            &:hover, &:focus {
                text-decoration: none;
                background-color: @nav-link-hover-bg;
                .hook-nav-hover;
            }
        }
        &.@{ns}active>a {
            &, &:hover, &:focus {
                color: @nav-active-link-color;
                background-color: @nav-active-link-bg;
                cursor: default;
            }
            .hook-nav-active;
        }
        // Disabled state sets text to gray and nukes hover/tab effects
        &.@{ns}disabled>a {
            color: @nav-disabled-link-color;
            &:hover, &:focus {
                color: @nav-disabled-link-hover-color;
                text-decoration: none;
                background-color: transparent;
                cursor: not-allowed;
            }
            .hook-nav-disabled;
        }
    }
    .hook-nav;
}

.@{ns}nav-header {
    padding: @nav-link-padding;
    text-transform: @nav-header-text-transform;
    font-weight: @nav-header-font-weight;
    font-size: @nav-header-font-size;
    color: @nav-header-color;
    .hook-nav-header;
}

.@{ns}nav-divider {
    margin: 15px 1em !important;
    border-top: 1px solid #ddd;
    box-shadow: 0 1px 0 #fff;
    .hook-nav-divider;
}

// Horizontal
// =============================================================================
.@{ns}nav-pills {
    >li {
        float: left;
        +li {
            margin-left: 5px;
            margin-top: 0;
        }
    }
    .hook-nav-pills;
}

// Tabs nav
// =============================================================================
.@{ns}nav-tabs {
    border-bottom: 1px solid @nav-tabs-border-color;
    >li {
        float: left;
        margin-bottom: -1px;
        +li {
            margin-top: 0;
        }
        >a {
            margin-right: 5px;
            line-height: @line-height-base;
            border: 1px solid transparent;
            border-radius: @global-radius @global-radius 0 0;
            &:hover {
                border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
            }
        }
        // Active state
        &.@{ns}active>a {
            &, &:hover, &:focus {
                color: @nav-tabs-active-link-hover-color;
                background-color: @nav-tabs-active-link-hover-bg;
                border: 1px solid @nav-tabs-active-link-hover-border-color;
                border-bottom-color: transparent;
                cursor: default;
            }
        }
    }
    &.@{ns}nav-justify {
        .nav-tabs-justify();
    }
    .hook-nav-tabs;
}

// Justify links
// =============================================================================
.@{ns}nav-justify {
    width: 100%;
    // display: flex;
    >li {
        float: none;
        // flex: 1;
        display: table-cell;
        width: 1%;
        >a {
            text-align: center;
            margin-bottom: 0;
        }
    }
    .hook-nav-justify;
}

// Hooks
// =============================================================================
.hook-nav() {}

.hook-nav-disabled() {}

.hook-nav-active() {}

.hook-nav-hover() {}

.hook-nav-header() {}

.hook-nav-divider() {}

.hook-nav-pills() {}

.hook-nav-tabs() {}

.hook-nav-justify() {}
